<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="9" :offset="7">
        <div style="margin-top: 15px; border-radius: 0px;">
          <div class="seachbox">
            <input type="text" v-model="desc" @change="searchByes" class="seach">
            <i></i>
          </div>
        </div>
      </el-col>
    </el-row>
   <el-row :gutter="20" style="margin-top: 20px; ">
      <el-col>
        <div id="back">
          <el-row>
            <el-col :span="4" :offset="1" style="background-color: antiquewhite;">
              <div class="foodtype">
                <span>可选食品分类</span>
               <!-- <el-cascader-panel :options="options"></el-cascader-panel> -->
              </div>

            </el-col>

            <el-col :span="12" style="background-color: transparent; margin-left: 10px; ">
              <el-carousel height="450px">
                <el-carousel-item v-for="item in foodList" :key="item.index">
                  <el-image class="el_carousel__item_image" :src="item.value"></el-image>
                </el-carousel-item>
              </el-carousel>
            </el-col>

            <el-col :span="4" style="margin-left: 10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="margin-left: 70px;">食堂公告</span>
                </div>
                <div class="text item">端午节食堂正常开放</div>
                <div class="text item">请同学们用餐时保持安静</div>
                <div class="text item">请同学们离开时带好自己的物品</div>
              </el-card>
            </el-col>
          </el-row>

         <el-row>
            <el-col :span="4" v-for="(o, index) in stores" :key="o" :offset="index > 0 ? 2 : 0">
              <el-card :body-style="{ padding: '0px' }" style="width: 320px;" @click="toStoreInfo(o.id)">

                <el-row>
                  <el-col :span="10">
                    <img
                      :src="o.logo"
                      class="image">
                  </el-col>
                 <el-col :span="10">

                   <el-row>
                      <el-col :span="20" :offset="2" style="margin-top: 10px;">
                       <el-row>
                          <el-col>
                            <span style="font-size:18px;">{{ o.storeName }}</span>
                          </el-col>
                        </el-row>
                      <el-row>
                          <el-col style="margin-top: 5px;">
                           <el-rate style="width: 170px;" v-model="o.storeScore" disabled  show-text ></el-rate>
                          </el-col>
                        </el-row>
                       <el-row>

                          <el-col :span="12">
                            <span style="font-size:15px; color: grey;">月销{{o.count ? o.count:0}}单</span>
                          </el-col>
                          <el-col :span="12">
                            <el-button @click="toStoreInfo(o.id)" style="float: right; padding: 3px 0" type="text">进入店铺</el-button>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col style="margin-top: 20px;">
                            <span style="font-size:12px; color: grey;">起送:￥{{o.initiatePrice}} 免配送费</span>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>

                  </el-col>
                </el-row>

              </el-card>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'U_main',
    data() {
      return {
        stores: [],
        desc:"",
        foodList: [{
          "index": 1,
          "value": require("../assets/u_main/h-6.jpg")
        },
        {
          "index": 2,
          "value": require("../assets/u_main/h-7.jpg")
        },
        {
          "index": 3,
          "value": require("../assets/u_main/h-8.jpg")
        }
        ],
      }
    },
    methods: {
      searchByes(){
        this.$http.post("/storeInfo/search",{desc:this.desc}).then(resp => {
          if (resp.data.code == 200) {
            this.stores = resp.data.data.list;
            this.desc = "";
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      initData() {
        this.$http.post("/storeInfo/search", {}).then(resp => {
          if (resp.data.code == 200) {
            this.stores = resp.data.data.list;
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      toStoreInfo(id){
        this.$router.push("/U_store?id=" + id)
      }
    },
    mounted() {
      this.initData();
    }
  }
  // import '../assets/my-ele-css/u_main.css'
</script>

<style scoped>
  * {
    /* padding: 0; */
    /* margin: 0; */
    outline: none;

  }

  .seachbox {
    width: 100%;
    height: 40px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border: 2px solid #f08300;
  }

  .seachbox .seach {
    width: 80%;
    height: 100%;
    border: none;
    font-size: 16px;
    color: dimgray;
    /* background-color: #f08300; */
  }

  .seachbox i {
    display: block;
    width: 50px;
    height: 50px;
    background: url("../assets/seach.png") no-repeat center/75%;
    cursor: pointer;

  }

  .box-card {
    height: 200px;
  }

  #back {
    background-image: url("../assets/b-1.jpg");
    /*    background-repeat: no-repeat; */
    background-size: 100%;

    height: 450px;

  }

/*  .bottom {
      margin-top: 13px;
      line-height: 12px;
    } */

.button{
  padding: 0;
   float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
